<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<title>首页</title>
		<link rel="stylesheet" href="css/muse-ui.css">
		<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic">
		<link rel="stylesheet" href="https://cdn.bootcss.com/material-design-icons/3.0.1/iconfont/material-icons.css">
		<link rel="stylesheet" href="css/muse-ui-loading.css">
		<link rel="stylesheet" href="https://at.alicdn.com/t/font_951857_sr7zod4vu4.css">
		<link rel="stylesheet" href="https://at.alicdn.com/t/font_1022050_664jq26xh4k.css">
		<script src="js/vue.min.js"></script>
		<script src="js/muse-ui.js"></script>
		<script src="js/muse-ui-loading.js"></script>
		<script src="js/muse-ui-toast.js"></script>
		<script src="js/axios.min.js"></script>
		<script src="js/mui.min.js"></script>
		<script src="js/utils.js"></script>
		<style>
			.container{
				width: 100%;
			}
			.container input {
				color: #ff4081;
			}
			.login-head{
				margin-top: 20%;
				width: 100%;
				text-align: center;
			}
			.icon-denglu{
				color: #fff;
				font-size: 70px;
			}
			.mine{
				height: 150px;
				width: 100%;
				background: linear-gradient(to bottom,#3fccf0,#DBB1FB);
				display: flex;
				align-items: center;
				justify-content: center;
			}
			.icon{
				font-size: 38px;
				color: #fff;
				padding: 0 1rem;
				border-radius: 10px;
			}
			.badge{
				position: absolute;
				left: 20px;
				top: -5px;
			}
			.gird{
				width: 25%;height: 100px;display: flex;flex-direction: column;align-items: center;justify-content: center;
				position: relative;
			}
		</style>
	</head>
	<body>
		<div id="body">
			<div v-if="tabindex=='home'">
				<mu-carousel transition="fade" style="height: 200px;">
					<mu-carousel-item>
						<img src="img/safe.jpg" style="width: 100%;height: 200px;">
					</mu-carousel-item>
					<mu-carousel-item>
						<img src="img/safe1.jpeg" style="width: 100%;height: 200px;">
					</mu-carousel-item>
				</mu-carousel>
				<mu-container>
					<div style="display: flex;background-color: #fff;border: solid 1px #C1C1C1;margin-top: 10px;">
						<div style="display: flex;flex-direction: column;align-items: center;align-content: flex-start;border-right: solid 1px #C1C1C1;">
							<i class="iconfont icon-xiazai41 icon" style="color: #FF6900;"></i>
						</div>
						<div style="display: flex;align-items: center;justify-content: center;width: 80%;color: red;font-size: 16px;font-weight: bold;">
							<marquee>
								<span v-if="!!chaobiaoTip" style="margin-right: 20px;" @click="util.openWindow('chaobiao.html')">{{chaobiaoTip}}</span>
								<span v-if="orderList.length>0" v-for="(item,index) in orderList" style="margin-right: 20px;" :key="item" @click="goOrder(item)">您有一条燃气费¥{{item.gasMoney+item.lateMoney}}元待支付的订单</span>
								<span v-if="!chaobiaoTip&&orderList.length==0">暂无提示</span>
							</marquee>
						</div>
					</div>
					<div style="display: flex;flex-wrap: wrap;">
						<div class="gird" @click="util.openWindow('ranqijiaofei.html')">
							<i class="iconfont icon-shenghuojiaofei icon" style="background-color: #3FCCF0;"></i>
							燃气交费
						</div>
						<div class="gird" @click="util.openWindow('chaobiao.html')">
							<i class="iconfont icon-yuanchengchaobiao icon" style="background-color:#FF4081"></i>
							自助抄表
						</div>
						<div class="gird" @click="util.openWindow('my_order.html')">
							<i class="iconfont icon-zhangdan icon" style="background-color: #C8A84A;"></i>
							账单查询
						</div>
						<div class="gird" @click="util.openWindow('accountApply.html',false)">
							<i class="iconfont icon-zhanghu icon" style="background-color: #FF6900;"></i>
							开户申请
						</div>
						<div class="gird" @click="util.openWindow('my_repair.html')">
							<i class="iconfont icon-baoxiu icon" style="background-color: green;"></i>
							燃气报修
						</div>
						<div class="gird"  @click="util.openWindow('my_safe.html',false)">
							<i class="iconfont icon-zhishiwenda icon" style="background-color: #D200FC;"></i>
							燃气知识
						</div>
						<div class="gird" @click="util.tip('开通中')">
							<i class="iconfont icon-leijiyuyue icon" style="background-color: #0083FC;"></i>
							预约巡检
						</div>
						<div class="gird"  @click="util.tip('开通中')">
							<i class="iconfont icon-baoxiu icon" style="background-color: #FC8200;"></i>
							网上商城
						</div>
					</div>
					<mu-paper :z-depth="2" style="margin-bottom: 70px;">
						<div style="padding-top: 5px;">
							<div style="margin-top: 5px;padding-left: 10px;font-size: 16px;border-left: #ff4081 5px solid;font-weight: bold;color: #ff4081;">便民服务</div>
							<mu-divider style="background-color: #FF4081;margin-top: 10px;"></mu-divider>
							<div style="display: flex;flex-wrap: wrap;align-content: flex-start;">
								<div style="width: 50%;padding: 15px;display: flex;justify-content: space-between;" @click="util.openWindow('my_safe.html',false)">
									<div style="font-weight: 400">
										燃气知识
										<div style="color: rgba(0,0,0,.3);">燃气安全,从这里开始</div>
									</div>
									<div>
										<i class="iconfont icon-zhishiku icon" style="color: green;"></i>
									</div>
								</div>
								<div style="width: 50%;padding: 15px;display: flex;justify-content: space-between;"  @click="util.openWindow('companyAddress.html')">
									<div style="font-weight: 400">
										营业网点
										<div style="color: rgba(0,0,0,.3);">网点一览,方便查找</div>
									</div>
									<div>
										<i class="iconfont icon-ditu icon" style="color: orange;"></i>
									</div>
								</div>
								<div style="width: 50%;padding: 15px;display: flex;justify-content: space-between;"  @click="util.openWindow('stopGasNotice.html')">
									<div style="font-weight: 400">
										停气公告
										<div style="color: rgba(0,0,0,.3);">停气安排,事先知晓</div>
									</div>
									<div>
										<i class="iconfont icon-gonggao icon" style="color: goldenrod;"></i>
									</div>
								</div>
								<div style="width: 50%;padding: 15px;display: flex;justify-content: space-between;" @click="callPhone(system.phone)">
									<div style="font-weight: 400">
										燃气热线
										<div style="color: rgba(0,0,0,.3);">24小时贴心服务</div>
									</div>
									<div>
										<i class="iconfont icon-kefurexian icon" style="color: red;"></i>
									</div>
								</div>
							</div>
						</div>
					</mu-paper>
				</mu-container>
			</div>
			<div v-else>
				<div class="mine">
					<div class="iconfont icon-denglu"></div>
					<div style="color: #FFFFFF;font-size: 18px;">
						<div>{{owner.name}}</div>
						<div>{{owner.phone}}</div>
						<div>余额:{{owner.money}}&nbsp;&nbsp;<a style="color: #FFFFFF;font-size: 14px;border-bottom: #FFFFFF 1px solid;" @click="util.openWindow('money.html')">充值/明细</a></div>
					</div>
				</div>
				<div>
					<mu-list style="background-color: #FFFFFF;">
						<mu-list-item button :ripple="true" @click="util.openWindow('my_order.html')">
							<mu-list-item-action>
								<mu-icon value="list"></mu-icon>
							</mu-list-item-action>
							<mu-list-item-title>我的账单</mu-list-item-title>
							<mu-list-item-action>                                                                                                                             
								<mu-icon value="keyboard_arrow_right"></mu-icon>
							</mu-list-item-action>
						</mu-list-item>
						<mu-list-item button :ripple="true" @click="util.openWindow('my_recordMeterRecord.html')">
							<mu-list-item-action>
								<mu-icon value="history"></mu-icon>
							</mu-list-item-action>
							<mu-list-item-title>抄表记录</mu-list-item-title>
							<mu-list-item-action>                                                                                                                             
								<mu-icon value="keyboard_arrow_right"></mu-icon>
							</mu-list-item-action>
						</mu-list-item>
						<mu-list-item button :ripple="true" @click="util.openWindow('my_safe.html')">
							<mu-list-item-action>
								<mu-icon value="security"></mu-icon>
							</mu-list-item-action>
							<mu-list-item-title>燃气知识</mu-list-item-title>
							<mu-list-item-action>                                                                                                                             
								<mu-icon value="keyboard_arrow_right"></mu-icon>
							</mu-list-item-action>
						</mu-list-item>
						<mu-list-item button :ripple="true" @click="util.openWindow('my_repair.html')">
							<mu-list-item-action>
								<mu-icon value="build"></mu-icon>
							</mu-list-item-action>
							<mu-list-item-title>燃气报修</mu-list-item-title>
							<mu-list-item-action>                                                                                                                             
								<mu-icon value="keyboard_arrow_right"></mu-icon>
							</mu-list-item-action>
						</mu-list-item>
					</mu-list>
					<mu-divider></mu-divider>

					<mu-list style="background-color: #FFFFFF;margin-top: 30px;">
						<mu-list-item button :ripple="true" @click="util.openWindow('my_changePhone.html')">
							<mu-list-item-action>
								<mu-icon value="phone"></mu-icon>
							</mu-list-item-action>
							<mu-list-item-title>修改手机</mu-list-item-title>
							<mu-list-item-action>                                                                                                                             
								<mu-icon value="keyboard_arrow_right"></mu-icon>
							</mu-list-item-action>
						</mu-list-item>
						<mu-list-item button :ripple="true" @click="util.openWindow('my_changePassword.html')">
							<mu-list-item-action>
								<mu-icon value="lock"></mu-icon>
							</mu-list-item-action>
							<mu-list-item-title>修改密码</mu-list-item-title>
							<mu-list-item-action>                                                                                                                             
								<mu-icon value="keyboard_arrow_right"></mu-icon>
							</mu-list-item-action>
						</mu-list-item>
					</mu-list>	
					<mu-divider></mu-divider>
					<mu-button full-width style="margin-top: 30px;" @click="logout()">退出登录</mu-button>
				</div>
			</div>
			<mu-bottom-nav :value.sync="tabindex" shift style="position: fixed;bottom: 0;width: 100%;" color="secondary">
				<mu-bottom-nav-item value="home" title="首页" icon="home"></mu-bottom-nav-item>
				<mu-bottom-nav-item value="my" title="我的" icon="person"></mu-bottom-nav-item>
			</mu-bottom-nav>
		</div>
	</body>
	<script type="text/javascript">
		var vm = new Vue({
			el: "#body",
			data() {
				return {
					tabindex: 'home',
					orderList: [],
					meterList: [],
					owner:{name:"",phone:""},
					chaobiaoTip:"",
					system:{}
				}
			},
			methods: {
				callPhone(phone){
					plus.device.dial(phone)
				},
				logout(){
					var res = confirm("确定退出登录?");
					if(res){
						this.tabindex='home';
						this.orderList= [];
						this.meterList= [];
						this.owner={name:"",phone:""};
						this.chaobiaoTip="";
						this.system={};
						plus.storage.clear();
						util.openWindow("login.html",false)
					}
				},
				getSystem(){
					util.ajax("/api/method/getSystem", null, data => {
						this.system = data.object[0];
						var version = plus.runtime.version;
						if(plus.os.name=="iOS"){
							if(version!=this.system.iosVersion){
								alert("发现新版本,请去应用中心更新!")
							}
						}else{
							if(version!=this.system.androidVersion){
								var res = confirm("发现新版本,是否更新?")
								if(res){
									plus.runtime.openURL(this.system.androidUrl)
								}
							}
						}
					})
				},
				getOwnerByUserId(){
					util.ajax("/api/method/getOwnerByUserId", null, data => {
						this.owner = data.object[0];
					})
				},
				goRecordMeter(meterId) {
					var params = {
						meterId: meterId
					}
					util.ajax("/meter/checkIsCanRecord", params, data => {
						if (data.code == 1) {
							util.setData("meterId", meterId);
							util.openWindow("recordMeter.html");
						} else {
							util.tip(data.msg, 5000);
						}
					})
				},
				getOrderByUserId() {
					var params = {
						"payState": '未支付'
					}
					util.ajax("/api/method/getOrderByUserId", params, data => {
						this.orderList = data.object;
					})
				},
				goOrder(order) {
					util.setData("order", order);
					util.openWindow("order.html")
				},
				goMeterRecord(meter) {
					util.setData("meter", meter);
					util.openWindow("meterRecord.html")
				},
				getMeterListByUserId() {
					util.ajax("/api/method/getMeterListByUserId", null, data => {
						this.meterList = data.object;
						this.chaobiaoTip = "";
						var count=0;
						this.meterList.forEach(item=>{
							var params = {
								meterId: item.id
							}
							util.ajax("/meter/checkIsCanRecord", params, data => {
								if (data.code == 1) {
									count++;
									this.chaobiaoTip="您有"+count+"块燃气表未抄表"
								}
							})
						})
					})
				},
			}
		})
		var quitFlag = false;
		function init(){
			vm.getOrderByUserId();
			vm.getMeterListByUserId();
			vm.getOwnerByUserId();
		}
		document.addEventListener('plusready', function() {
			vm.getSystem();
			mui.back = function() {
				if (quitFlag) {
					plus.storage.clear()
					plus.runtime.quit();
				} else {
					util.tip("再按一次退出");
					quitFlag = true;
					setTimeout(() => {
						quitFlag = false;
					}, 1500)
				}
			}
		});
	</script>
</html>
